<template>
  <div class="main-container">
    <!-- 顶部选项卡区域 -->
    <div class="header-container">
      <div class="back-icon" @click="PageHooks.handlePageBack">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <a-tabs
        type="card-gutter"
        class="tabs"
        :editable="true"
        :show-add-button="false"
        :hide-content="true"
        v-model:active-key="PageHooks.currentId.value"
        :default-active-key="PageHooks.currentId.value"
        @tab-click="PageHooks.handleTabClick"
        @delete="PageHooks.handleDelete"
      >
        <a-tab-pane
          v-for="item in PageHooks.taskIdList.value"
          :title="`查看${item.id}`"
          :key="+item.id"
        ></a-tab-pane>
      </a-tabs>
    </div>
    <div class="container" :key="PageHooks.currentId.value">
      <a-card
        class="content"
        :bordered="false"
        v-if="PageHooks.taskIdList.value.some((item) => item.isActive)"
      >
        <div class="detail-title">
          <div class="h1-title">任务ID : {{ TaskInfoStore.taskId }}</div>
          <div class="title-content">
            <div v-for="item in TaskInfoStore.titleContent" :key="item.value">
              <span class="title-content-label">{{ item.label }}: </span>
              <span
                class="title-content-value"
                v-if="item.label === '任务状态' && item.value === 0"
                style="color: #ff8800"
                >未发布</span
              >
              <span
                class="title-content-value"
                v-if="item.label === '任务状态' && item.value === 1"
                style="color: #0dab76"
                >进行中</span
              >
              <span
                class="title-content-value"
                v-if="item.label === '任务状态' && item.value === 2"
                style="color: #333333"
                >已完成</span
              >
              <span
                class="title-content-value"
                v-if="item.label === '任务状态' && item.value === 3"
                style="color: #999999"
                >已终结</span
              >
              <span class="title-content-value" v-if="item.label !== '任务状态'">{{
                item.value
              }}</span>
            </div>
          </div>
        </div>
        <!-- 开放式 -->
        <TaskInfoOpen v-if="TaskInfoStore.currentType === 1"></TaskInfoOpen>
        <!-- 承包式 -->
        <TaskInfoCon v-if="TaskInfoStore.currentType === 2"></TaskInfoCon>
        <div class="detail-table">
          <div class="table-title">标注结果列表</div>
          <div class="table-search">
            <div class="search-box">
              <div class="search-item">
                <span>序列号</span>
                <a-input
                  v-model="PageHooks.searchForm.value.seriesUid"
                  allow-clear
                ></a-input>
              </div>
              <div class="search-item">
                <span>标注医生</span>
                <a-select v-model="PageHooks.searchForm.value.userId" allow-clear>
                  <a-option
                    v-for="item in PageHooks.userList.value"
                    :key="item.id"
                    :value="item.id"
                    :label="item.userName"
                    >{{ item.userName }}</a-option
                  >
                </a-select>
              </div>
              <div class="search-item">
                <a-button type="primary" @click="PageHooks.handleSearch">查 询</a-button>
                <a-button @click="PageHooks.handleReset">重 置</a-button>
              </div>
            </div>
            <div>
              <a-button type="primary" @click="PageHooks.handleQueryAll"
                >查看所有标注结果</a-button
              >
            </div>
          </div>
          <div>
            <Table
              :columns="PageHooks.columns.value"
              :data="PageHooks.tableData.value"
              :total="PageHooks.total.value"
              :current="PageHooks.searchForm.value.page"
              :pageSize="PageHooks.searchForm.value.pageSize"
              :scrollbar="false"
              :stickyHeader="true"
              :showPageSize="true"
              @handle-size-change="PageHooks.handleSizeChange"
              @handle-current-size-change="PageHooks.handlePageSizeChange"
            >
              <!-- 标注状态 -->
              <template #status="{ record }">
                <span>{{
                  record.status === 2 ? "已提交" : record.status === 3 ? "废片" : "进行中"
                }}</span>
              </template>
              <!-- 是否废片 -->
              <template #showStatus="{ record }">
                <span>{{ record.status !== 3 ? "否" : "是" }}</span>
              </template>
              <!-- 提交时间 -->
              <template #submitTime="{ record }">
                <span v-if="record.submitTime">{{
                  moment(record.submitTime).format("YYYY-MM-DD HH:mm:ss")
                }}</span>
                <span v-else>-</span>
              </template>
              <!-- 操作 -->
              <template #action="{ record }">
                <a-button
                  type="text"
                  class="action-btn"
                  @click="() => PageHooks.handleQueryResult(record)"
                  >查看标注结果</a-button
                >
              </template>
            </Table>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import moment from "moment";
import TaskInfoOpen from "./component/taskInfoOpen/index.vue";
import TaskInfoCon from "./component/taskInfoContractual/index.vue";
import Table from "@/components/table/index.vue";
import usePage from "./hooks/usePage";
import * as Store from "@/store";
const PageHooks = usePage();
const TaskInfoStore = Store.useTaskInfo();
</script>

<style lang="less" scoped>
.main-container {
  height: 100%;
}
.header-container {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  background-color: #fff;
  .back-icon {
    padding: 0 18.73px;
    cursor: pointer;
    i {
      color: #888;
    }
  }
  .tabs {
    height: 30px;
    :deep(.arco-tabs-tab) {
      width: 100px;
      height: 30px;
      padding: 0;
      background-color: #fff;
      color: #666;
      border: 0;
      .arco-tabs-tab-title {
        padding: 0 8px;
        width: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .arco-tabs-tab-close-btn {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin-left: 0;
        margin-right: 4px;
      }
    }
    :deep(.arco-tabs-tab-active) {
      background-color: #f5f5f5;
      color: #448e97;
      .arco-tabs-tab-close-btn {
        background-color: #c0c4cc;
      }
    }
    :deep(.arco-tabs-nav-type-card-gutter) {
      .arco-tabs-tab:hover {
        background-color: #f5f5f5;
        color: #448e97;
      }
    }
  }
}
.container {
  padding: 16px;
  width: 100%;
  height: calc(100% - 32px);
  overflow: auto;
  .content {
    //width: 100%;
    //height: 100%;
    background-color: #fff;
    padding: 32px;
    :deep(.arco-card-body) {
      color: #666;
      height: 100%;
      padding: 0;
      overflow-y: auto;
    }
    .detail-title {
      border-bottom: 1px solid #e8e8e8;
      .h1-title {
        color: #448e97;
        font-weight: 700;
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 21px;
        display: flex;
        align-items: center;
        height: 26px;
      }
      .title-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 33px;
        div {
          flex: 1;
        }
        .title-content-label {
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: #666;
        }
        .title-content-value {
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: #333;
        }
      }
    }
    .detail-table {
      padding: 32px 0;
      .table-title {
        font-weight: 700;
        font-size: 16px;
        color: #333;
        margin-bottom: 23px;
      }
      .table-search {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
      }
      .search-box {
        display: flex;
        align-items: center;
        .search-item {
          display: flex;
          align-items: center;
          padding-right: 24px;
          span {
            white-space: nowrap;
            padding-right: 12px;
          }
          .arco-input-wrapper {
            min-width: 200px;
            max-width: 200px;
            height: 32px;
          }
          :deep(.arco-select-view-single) {
            min-width: 200px;
            max-width: 200px;
            height: 32px;
          }
          .arco-btn:nth-of-type(1) {
            margin-right: 12px;
          }
          :deep(.arco-btn) {
            min-width: 65px;
            max-width: 65px;
            height: 32px;
          }
        }
      }
    }
  }
}
.action-btn {
  cursor: pointer;
  user-select: none;
  color: #448e97;
}
.action-btn:hover {
  text-decoration: underline;
}
</style>
